let page = 1 ;
var dataArr = [
    {
        pname: "飞利浦新安怡卡通企鹅杯学饮杯7安士200ml 训练水杯 防漏带手柄（2件装）",
        price: 59.88,
        num: 1,
        ischecked: false,
        img: "img/images/20150708112148lm2t0.jpg"
    },
    {
        pname: "日本Merries花王新生儿纸尿裤S82",
        price: 388.5,
        num: 1,
        ischecked: false,
        img: "img/images/201509091748430829.jpg"
    },
    {
        pname: "Sony/索尼 DSC-WX300",
        price: 148.5,
        num: 1,
        ischecked: false,
        img: "img/images/3.jpg"
    }, {
        pname: "韩国MOMMA手工陶瓷奶瓶（220ml,320ml）+保温夜光喂奶灯套装 多款颜色图案随机发货",
        price: 640.6,
        num: 1,
        ischecked: false,
        img: "img/images/201608081427026196.jpg"
    },

];
ajax();
console.log(111111111);
ajax({
    url:'../html/admin/allProduct.php',
    method:"post",
    data:{
        page
    },
    dataType:'json',
    success(data){
        console.log(data);
    }
    
});
renderDom(dataArr);
// 根据数据渲染 视图；

function renderDom(dataArr) {
    var tbody = document.querySelector("tbody");
    //总价
    var priceTotal = document.getElementById("priceTotal");
    //选择的总量
    var selectedTotal = document.getElementById("selectedTotal");
    tbody.innerHTML = "";
    var totalPrice = 0 ; 
    var totalNum = 0 ;
    dataArr.forEach(function (item,key) {
        var trEle = document.createElement("tr");
        if (item.ischecked) {
            var isCheckStr = `<input class="check-one check" checked  type="checkbox" />`;
            totalPrice = totalPrice + ( item.price * 100 * item.num / 100 );
            totalNum = totalNum + parseInt( item.num ) ;
        } else {
            var isCheckStr = `<input class="check-one check"   type="checkbox" />`;
        }
        if ( item.num > 1 ){
            var reduceStr = `<span class="reduce">-</span>`
        }
        if ( item.num == 1 ){
            var reduceStr = `<span class="reduce"></span>`
        }
        trEle.innerHTML = `<td class="checkbox">
                ${isCheckStr}
            </td>
            <td class="goods"><img src="${item['srcImg']}"
                    alt="" /><span>${item['pname']}</span></td>
            <td class="price">${item['price']}</td>
            <td class="count">${reduceStr}<input class="count-input" type="text"
                    value="${item.num}" /><span class="add">+</span></td>
            <td class="subtotal">${ item.price * 100 * item.num / 100}</td>
            <td class="operation"><span class="delete">删除</span></td>`;
        tbody.appendChild(trEle);
    })
    priceTotal.innerHTML = `${totalPrice.toFixed(2)}`
    selectedTotal.innerHTML = `${totalNum}`
    // 从新添加点击事件；
    countChange();
    countChecked();
    delTr();
}


// 数量操作
// 先操作数据，然后再渲染视图
function countChange() {
    var addEles = document.querySelectorAll(".add");
    var reduceEles = document.querySelectorAll(".reduce");
    var countEles = document.querySelectorAll(".count-input");
    addEles.forEach(function (item, key) {
        item.onclick = function () {
            dataArr[key].num += 1;
            console.log(reduceEles[key]);
            renderDom(dataArr);
        }
    });
    reduceEles.forEach(function(reduceEle,key){
        reduceEle.onclick = function () {
            if ( dataArr[key].num > 1 ) {
                dataArr[key].num -= 1;
            }
            renderDom(dataArr);
        }
    });
}

function countChecked () {
    //全选伪数组
    var checkAllEles = document.querySelectorAll(".check-all");
    //单选伪数组
    var checkOneEles = document.querySelectorAll(".check-one");
    checkOneEles.forEach(function(checkOneEle,key){
        checkOneEle.onclick = function () {
            dataArr[key].ischecked = checkOneEle.checked ;
            var res = dataArr.every(function( item ){
                return item.ischecked ;
            });
            checkAllEles.forEach(function(checkAllEle){
                checkAllEle.checked = res ;
            });
            renderDom(dataArr);
        }
    });
    checkAllEles.forEach(function(checkAllEle){
        checkAllEle.onclick = function (){
            var flag = checkAllEle.checked ;
            dataArr.forEach(function(item){
                item.ischecked = flag ; 
            });
            checkAllEles.forEach(function(checkAllEle){
                checkAllEle.checked = flag ; 
            });
            renderDom(dataArr);
        }
    });
}

function delTr (){
    //全删
    var deleteAll = document.getElementById("deleteAll");
    //单删伪数组
    var delBtns = document.querySelectorAll(".delete");
    var checkAllEles = document.querySelectorAll(".check-all");
    delBtns.forEach(function(delBtn,key){
        delBtn.onclick = function () {
            dataArr.splice(key,1);
            if( dataArr.length == 0 ){
                checkAllEles.forEach(function(checkAllEle){
                    checkAllEle.checked = false ;
                });
            }
            renderDom(dataArr);
        }
    });
    deleteAll.onclick = function (){
        var newArr = dataArr.filter(function(item){
            return item.ischecked == false ; 
        });
        if ( newArr.length == 0 ){
            checkAllEles.forEach(function(checkAllEle){
                checkAllEle.checked = false ; 
            });
        }
        dataArr = newArr ; 
        renderDom(dataArr);
    }
}